<template>
  <div class="mycart">
    <van-nav-bar title="购物车" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>

    <van-swipe-cell
      class="goods-swipe"
      v-for="item in $store.state.cartData"
      :key="item.goodsId"
    >
      <van-card
        class="goods-card"
        :price="item.sellingPrice"
        :title="item.goodsName"
        :thumb="item.goodsCoverImg"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
      <van-checkbox class="singleCheck" v-model="item.checked"></van-checkbox>
      <van-stepper
        class="mystepper"
        v-model="item.goodsCount"
        @change="changeStepper(item)"
      />
    </van-swipe-cell>

    <van-submit-bar
      class="mysubmit"
      :price="$store.getters.CalSumPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="AllChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { SwipeCell, Card, SubmitBar, Checkbox, Stepper } from "vant";
Vue.use(SwipeCell).use(Card).use(SubmitBar).use(Checkbox).use(Stepper);

export default {
  name: "Cart",
  props: [],
  created() {
    this.$store.dispatch("getCartData");
  },
  data() {
    return {
      checked: true,
    };
  },

  methods: {
    onSubmit() {
      this.$store.commit("getCheckedIds");
      localStorage.setItem("cartitemids",this.$store.state.cartItemIds.join())
      this.$router.push("/addressList")
    },
    changeStepper(item) {
      //console.log(item);
      if (item.checked) {
        let obj = { id: item.cartItemId, count: item.goodsCount };
        this.$store.dispatch("editCartData", obj);
      }
    },
  },
  computed: {
    AllChecked: {
      get() {
        return !this.$store.state.cartData.some(
          (item) => item.checked == false
        );
      },
      set(val) {
        this.$store.state.cartData.forEach((item) => {
          item.checked = val;
        });
      },
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.goods-swipe {
  position: relative;
}
.goods-card {
  margin: 2px 0;
  background-color: #fafafa;
  box-sizing: border-box;
  padding-left: 32px;
}
.singleCheck {
  position: absolute;
  top: 40px;
  left: 5px;
}
.delete-button {
  height: 100%;
}
.mystepper {
  position: absolute;
  top: 75px;
  right: 5px;
}
.mysubmit {
  bottom: 50px;
}
</style>
